<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <title>首页</title>
</head>
<body>
    <div class="leftbar">
        <div class="logo">
            LOGO
        </div>
        <div>
            <ul class="nav nav-stacked nav-pills">
                <li onclick="getClick('1')" role="presentation" class="netsbtn active"><a href="#">网关配置</a></li>
                <li onclick="getClick('2')" role="presentation" class="serverbtn"><a href="#">服务状态</a></li>
                <li onclick="getClick('3')" role="presentation" class="otherbtn"><a href="#">Messages</a></li>
            </ul>
        </div>
    </div>
    <div class="rightcontent">
        <div class="topbar">
            <div class="searchdiv">
                <img class="searchimg" src="./img/search.png" alt="">
                <input type="text" class="searchinput" placeholder="请输入关键字">
            </div>
            <div class="userinfo">
                <div class="userfont">
                    欢迎,<span class="username">123</span>
                    <img src="./img/header.png" style="width: 30px;margin: 10px 20px;" alt="">
                    <img style="width: 18px;margin: 10px 30px;" src="./img/refresh.png" alt="">
                </div>
            </div>
        </div>
        <div class="detialcontent">
            <div class="nets leftbtn">
                网关配置
				<input id="file" type="file" value="Submit">
            </div>
            <div class="server leftbtn">
                服务状态
            </div>
            <div class="other leftbtn">
                其他
            </div>
        </div>
    </div>
    <script>
	var fileInput = document.querySelector('input[type=file]'),
          previewImg = document.querySelector('img');
		fileInput.addEventListener('change', function () {
		  var file = this.files[0];
		  var reader = new FileReader();
		  // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
		  reader.addEventListener("load", function () {
			  previewImg.src = reader.result;
		  }, false);
		  // 调用reader.readAsDataURL()方法，把图片转成base64
		  reader.readAsDataURL(file);
	  }, false);
        $(function(){
            getClick('1');
        })
        function getClick(data){
            $('.leftbtn').css('display','none');
            if(data=="1"){
                $(".netsbtn").addClass('active');
                $(".serverbtn").removeClass('active');
                $(".otherbtn").removeClass('active');
                $(".nets").css('display','block');
            }else if(data=="2"){
                $(".netsbtn").removeClass('active');
                $(".serverbtn").addClass('active');
                $(".otherbtn").removeClass('active');
                $(".server").css('display','block');
            }else{
                $(".netsbtn").removeClass('active');
                $(".serverbtn").removeClass('active');
                $(".otherbtn").addClass('active');
                $(".other").css('display','block');
            }
        }
    </script>
</body>
</html>